<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { RowType } from '#/views/system/permission/permission.data';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  permissionDelApi,
  permissionQueryListApi,
} from '#/api/system/permission';
import { useDictionaries } from '#/utils';
import PermissionFormDrawer from '#/views/system/permission/modules/PermissionFormDrawer.vue';

const { translateValue } = useDictionaries(['menu_type']);

const gridOptions: VxeGridProps<RowType> = {
  height: 'auto',
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons',
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  treeConfig: {
    reserve: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    {
      title: '菜单名称',
      field: 'name',
      minWidth: 300,
      align: 'left',
      treeNode: true,
      slots: { default: 'name' },
    },
    {
      title: '菜单类型',
      cellRender: {
        name: 'CellDict',
        attrs: {
          dictCode: 'menu_type',
          translateValue,
        },
      },
      field: 'type',
      minWidth: 80,
    },
    { title: '路由地址', field: 'routePath', align: 'left', minWidth: 100 },
    { title: '组件路径', field: 'componentPath', align: 'left', minWidth: 100 },
    { title: '权限标识', field: 'perms', minWidth: 100 },
    { title: '排序', field: 'sortRank', minWidth: 50 },
    { title: '备注', field: 'remark', minWidth: 100 },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      minWidth: 160,
    },
  ],
  proxyConfig: {
    ajax: {
      query: async () => {
        return await permissionQueryListApi();
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

const [FormDrawer, formDrawerApi] = useVbenDrawer({
  connectedComponent: PermissionFormDrawer,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      gridApi.query();
      // const rows = gridApi.grid.getTreeExpandRecords();
      // console.log('rows:', rows)
      // gridApi.grid.setTreeExpand(rows, true);
    }
  },
});

function openForm(id) {
  if (id) {
    formDrawerApi.setData({
      id: undefined,
      pid: id,
    });
  } else {
    formDrawerApi.setData({
      id,
    });
  }
  formDrawerApi.open();
}
function openEditForm(row) {
  formDrawerApi.setData({
    id: row.id,
  });
  formDrawerApi.open();
}

const expandAll = () => {
  gridApi.grid?.setAllTreeExpand(true);
};

const collapseAll = () => {
  gridApi.grid?.setAllTreeExpand(false);
};
async function delRow(row) {
  const msg = await permissionDelApi(row.id);
  message.success(msg);
  await gridApi.query();
}
</script>

<template>
  <Page auto-content-height>
    <FormDrawer class="w-[50%]" />
    <Grid>
      <template #toolbar-buttons>
        <a-button
          v-access:code="'sys:perm:add'"
          type="primary"
          @click="openForm()"
        >
          新增
        </a-button>
      </template>
      <template #toolbar-tools>
        <a-button class="mr-2" type="primary" @click="expandAll">
          展开全部
        </a-button>
        <a-button type="primary" @click="collapseAll"> 折叠全部 </a-button>
      </template>
      <template #action="{ row }">
        <a-button
          v-access:code="'sys:perm:child'"
          size="small"
          type="link"
          @click="openForm(row.id)"
        >
          新增下级
        </a-button>
        <a-button
          v-access:code="'sys:perm:edit'"
          size="small"
          type="link"
          @click="openEditForm(row)"
        >
          编辑
        </a-button>
        <a-popconfirm
          cancel-text="再想想"
          title="您确定要删除吗?"
          @confirm="delRow(row)"
        >
          <a-button
            v-access:code="'sys:perm:del'"
            size="small"
            type="link"
            danger
          >
            删除
          </a-button>
        </a-popconfirm>
      </template>
      <template #name="{ row }">
        <div class="flex items-center">
          <IconifyIcon v-if="row.icon" :icon="row.icon" class="mr-2 size-4" />
          <span>
            {{ row.name }}
          </span>
        </div>
      </template>
    </Grid>
  </Page>
</template>
